Al crear una aplicación con create-react-app , recibo el siguiente error al intentar usar hydrate en lugar del .render predeterminado. Aquí está el contenido del archivo src/index.js .
import React from 'react'; import ReactDOMServer from 'react-dom/client'; import './index.css'; import App from './App'; const root = ReactDOMServer.createRoot(document.getElementById('root')); root.hydrate( <React.StrictMode> <App /> </React.StrictMode> ); Ejecutar el código anterior npm start produce el siguiente error
Uncaught TypeError: root.hydrate is not a function El error no está presente si cambio el .hydrate de nuevo a .render y no estoy seguro de por qué sucede esto.
Gracias @ PR7 que funcionó perfectamente.
Tenga en cuenta que, como la sintaxis de mi archivo original era ligeramente diferente (de su ejemplo), he escrito mi "antes" y "después" a continuación; en caso de que pueda ayudar a alguien más.
// Before import ReactDOM from 'react-dom/client'; const root = ReactDOM.createRoot(document.getElementById('root')); root.hydrate( <React.StrictMode> <App /> </React.StrictMode> ); // After import { hydrateRoot } from 'react-dom/client'; const container = document.getElementById('root'); const root = hydrateRoot(container, <App />);
hydrateha sido reemplazado porhydrateRooten React 18.
hydrateRoot(container, element[, options]) Puede consultar para obtener más información sobre hydrateRoot aquí: Documentación
// Before React 18 import { hydrate } from 'react-dom'; const container = document.getElementById('app'); hydrate(<App tab="home" />, container); // After React 18+ import { hydrateRoot } from 'react-dom/client'; const container = document.getElementById('app'); const root = hydrateRoot(container, <App tab="home" />); // Unlike with createRoot, you don't need a separate root.render() call here.